Nei forum che spesso frequento vengono poste, nella maggior parte dei casi, domande inerenti la corretta interpretazione,da parte di diversi browser di ultima generazione, di codice CSS, o parte di esso, circa la visualizzazione di un elenco orizzontale o un elemento di blocco ecc...
Proprio quest' ultimo oggetto è spesso al centro di discussioni su come scrivere righe di dichiarazioni nel foglio di stile oppure a quali trucchi ricorrere. In rete ci sono tantissimi siti che offrono diversi modi di interpretare nella maniera più omogenea possibile codice CSS, soprattutto per quanto riguarda Internet Explorer; sarebbe il caso di provvedere ad usare meno hack o filtri e sfruttare le potenzialità dei commenti condizionali. In inglese: conditional comments.
Si potrebbe dire che essi sono, forse, il "filtro" più sicuro ed efficiente che attualmente circola nelle pagine web. Da cosa nasce questa "sicurezza"? Dal fatto che non si basano su difetti o di un "bug" relativo ad un particolare browser, ma cercano di sfruttare una caratteristica che è propria di Internet Explorer per Windows. Infatti questo browser, quando all' interno di una pagina HTML trova i classici commenti per "nascondere" una parte di testo o qualche tag, tutto quello che si trova tra i simboli <!-- e --> non viene "stampato" a video. Chiaramente la sintassi non si compone dei soli simboli che ho scritto qui su, ma il resto lo vedremo tra poco.
La corretta sintassi di un commento condizionale
La sintassi di un commento condizionale, come ho scritto su, viene riconosciuta solo da Internet Explorer per Windows. La parte relativa al commento l' ho scritta; e la "condizione"? Si tratta, come in qualche altro linguaggio di programmazione, di un costrutto if...then: se una condizione è vera, allora dovrebbe accadere qualcosa. Cominciamo a vedere come scrivere un commento condizionale:
<!--[if espressione]> codice XHTML <![endif]-->
Se "espressione" è vera, allora tale condizione verrà soddisfatta dal browser. Ci sono diversi commenti condizionali che si possono introdurre all' interno di una pagina html; essi vanno, per la precisione, scritti tra i tag <head> e </head>. Vediamo quali sono:
- <!--[if IE]>....<![endif]-->: verifica se il browser è Internet Explorer, indipendentemente dalla versione.
- <!--[if IE 5]>....<![endif]-->: verifica se il browser è Internet Explorer solo versione 5;
- <!--[if gt IE 5]>....<![endif]-->: verifica se il browser è Internet Explorer, versione superiore alla 5;
- <!--[if gte IE 5]>....<![endif]-->: verifica se il browser è Internet Explorer versione 5 o superiore;
- <!--[if lt IE 6]>....<![endif]-->: verifica se il browser è Internet Explorer versione inferiore alla 6;
- <!--[if lte IE 6]>....<![endif]-->: verifica se il browser è Internet Explorer versione 6 o inferiore;
- <!--[if !IE 5.5]>....<![endif]-->: verifica se il browser è Internet Explorer versione diversa dalla 5.5.
Un esempio concreto
Per vedere come effettivamente si comporta un commento condizionale, ho preparato un esempio in cui avremo un titolo <h1>, un box al centro della pagina [con colore di sfondo diverso a seconda che lo si visualizzi con Internet Explorer, vers. 5, 5,5 e 6, e con un browser diverso], selettore p [paragrafo] anch' esso di colore testo e colore bordo diversi in IE da altri.
Per far si che un commento condizionale abbia il suo effetto, possiamo importare due fogli di stile, uno per tutti i browser e l' altro con le modifiche da far intepretare ad Internet Explorer, oppure scrivere il codice CSS normalmente e poi scrivere il commento condizionale. Il secondo caso sarà quello che adotteremo per l' esempio.
Vediamo come procedere e scriviamo il codice nella pagina:
<style type="text/css">
h1{
margin:0;
padding:0;
color: #666;
font-size: 1.5em;
}
#box{
margin: 20px auto;
padding:0;
border: 1px solid #666;
width: 300px;
height: 100px;
background: #f60;
}
p{
margin:0 auto;
padding:0;
font-size: 1.1em;
color: #000;
border: 2px solid #09d;
width: 30em;
}
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" href="NomeFile.css" type="text/css" />
<![endif]-->
A guardare il codice che ho scritto qui su, vogliamo ottenere un titolo <h1> di colore grigio scuro e con un font pari ad 1.5em; al di sotto di esso avremo un box centrato nella pagina con un bordo dello stesso colore del titolo <h1>, larghezza ed altezza pari a 300px X 100px ed un colore di sfondo arancio. Il testo racchiuso tra i tag <p> avrà una grandezza di font pari ad 1.1em, colore nero, bordo celeste ed una ampiezza (larghezza) di 30em. Tutto questo, però, lo potremo vedere in un browser diverso da Internet Explorer per Windows; per questo, invece, ci avvarremo del commento condizionale che ho scritto al di sotto del codice CSS.
Traducendo quelle tre righe di codice abbiamo che: se il browser è Internet Explorer per Windows versione 6 o inferiore [quindi verifica che si tratti delle versioni 5, 5.5 e 6], deve interpretare il codice CSS "NomeFile.css". Si chiude il commento condizionale con la sintassi "<![endif]-->". Cosa contiene il file CSS appositamente scritto per Internet Explorer?
Il foglio di stile per IE
Adesso vedremo cosa dichiarare nel foglio di stile che deve essere renderizzato da Internet Explorer. Tenendo conto che gli elementi sono sempre gli stessi, abbiamo:
#box{
height:150px;
background: #f00;
}
h1{
margin:0;
padding: 1.5em;
color: #09d;
font-size: 2.5em;
}
p{
color: #09d;
border: 5px solid #8d0;
width: 40em;
}
Le differenze sono evidenti se si fa un confronto tra i due codici. Una cosa importante è che non si deve riscrivere tutto il codice per un determinato elemento nel foglio di stile da far "leggere" ad Internet Explorer, basta apportare le modifiche desiderate.
Tratto da: http://www.webmasterpoint.org
Stampa 
